
import React, { Component } from 'react';// 各种包一定要注意导入
import {
    Platform,
    StyleSheet,
    Text,
    View,
    NativeModules,
    TouchableNativeFeedback,
    ToastAndroid,
    Image
} from 'react-native';

// 导航切换
import TabNavigator from 'react-native-tab-navigator';

import Home_01 from './Home_01';
import Home_02 from './Home_02';
import Home_03 from './Home_03';
import Home_04 from './Home_04';
import Home_05 from './Home_05';
import Home_06 from './Home_06';


class HomeIndex extends Component {


    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Home_03'
        }
    }
    render() {
        return (
            <View style={styles.appContainer}>
                <TabNavigator>
                    {this._renderTab(Home_01, 'Home_01', '首页', require('../../imgs/Home.png'), require('../../imgs/Home.png'))}
                    {this._renderTab(Home_02, 'Home_02', '中页', require('../../imgs/Home.png'), require('../../imgs/Home.png'))}
                    {this._renderTab(Home_03, 'Home_03', '我的', require('../../imgs/Home.png'), require('../../imgs/Home.png'))}
                </TabNavigator>

            </View>
        );
    }

    _renderTab(Component, selectedTab, title, renderIcon, activeIcon) {
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab === selectedTab}
                selectedTitleStyle={styles.selectedTitleStyle}
                titleStyle={styles.titleStyle}
                title={title}
                renderIcon={() => <Image style={styles.image}
                    source={renderIcon} />}
                renderSelectedIcon={() => <Image style={styles.image}
                    source={activeIcon} />}
                onPress={() => this.setState({ selectedTab: selectedTab })}>
                <Component {...this.props} />
            </TabNavigator.Item>
        )
    }
}

const styles = StyleSheet.create({
    appContainer: {
        flex: 1
    },
    image: {
        height: 24,
        width: 24,
    },
    titleStyle: {
        fontSize: 12,
    },
    selectedTitleStyle: {
        color: '#666',
        fontSize: 12
    }
});

export default HomeIndex;